<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>自助缴费车险缴费</title>
		<script type="text/javascript" src="../statics/js/jquery-1.12.4.js"></script>
		<script type="text/javascript" src="../statics/js/bootstrap.min.js"></script>
		<link href="../statics/css/css/bootstrap.min.css" rel="stylesheet" media="screen">
		<style type="text/css">
			.aaaa {
				margin: 0em;
				padding: 0em;
			}
			.dowl {
				position: relative;
			}
			
			.pay {
				font-size: 2em;
				text-align: center;
			}
			
			.control {
				width: 21em;
				border: 1px solid red;
				height: 3em;
				font-size: 1em;
				margin-top: 1em;
				border-radius: 0.5em;
			}
			
			.code {
				background: url(code_bg.jpg);
				font-family: Arial;
				font-style: italic;
				color: blue;
				font-size: 15px;
				border: 0;
				padding: 2px 3px;
				letter-spacing: 3px;
				font-weight: bolder;
				float: left;
				cursor: pointer;
				width: 80px;
				height: 100px;
				line-height: 60px;
				text-align: center;
				vertical-align: middle;
				background-image: 1em;
				margin-top: -4.8em;
				margin-left: 14.5em;
			}
			
			a {
				text-decoration: none;
				font-size: 12px;
				color: #288bc4;
			}
			
			a:hover {
				text-decoration: underline;
			}
			
			td {
				font-size: 0.8em;
			}
			
			.submit {
				width: 10em;
				height: 2em;
				border-radius: 0.5em;
				margin-left: 4em;
				
			}
			
			.xs {
				text-align: center;
				display: block;
			}
			
			#Button1 {
				width: 21em;
				height: 3em;
				margin-left: -1em;
				background-color: rgb(205,101,129);
				color: #FFFFFF;
			}
			
			.kan {
				position: absolute;
				top: 2em;
				left:31em;
				font-size: 2px;
			
			}
			
			.a1 {
				width: 10em;
				height: 2em;
				margin-left: 4em;
				margin-top: -1.5em;
				
			}
			.a2{
				
				position:relative;
				width: 13em;
				height: 2.5em;
				padding: 0em;
				
			}
			.wen{
				margin-top: 2em;
			}
			.wen1{
				border-bottom: 3px solid #F5F5F5;
				width: 5em;
				margin-left: 1em;
				
			}
			.wen2{
				margin-left: 8em;
				margin-top: -2.5em;
			}
			.wen3{
				border-bottom: 3px solid #F5F5F5;
				width: 5em;
				margin-left: 16em;
				margin-top: -2.2em;
				
			}
			
			.c1{
				margin-top: 2em;
				font-size: 1.2em;
			}
		</style>

		<script type="text/javascript">
			$(function() {
				$("#inputCode").click(function() {
					var str = $("#inputCode").val()
					if(str != "" && str != null) {
						$("#Button1").removeAttr("disabled");
					} else if(str == "" || str == null) {

					}
				})

			})

			var code;

			function createCode() {
				code = "";
				var codeLength = 6; //验证码的长度
				var checkCode = document.getElementById("checkCode");
				var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
					'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
					'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符，当然也可以用中文的
				for(var i = 0; i < codeLength; i++) {
					var charNum = Math.floor(Math.random() * 52);
					code += codeChars[charNum];
				}
				if(checkCode) {
					checkCode.className = "code";
					checkCode.innerHTML = code;
				}
			}

			function validateCode() {
				var inputCode = document.getElementById("inputCode").value;

				if(inputCode.length <= 0) {
					alert("请输入验证码！");
					$("#Button1").css("display", "none");
				} else if(inputCode.toUpperCase() != code.toUpperCase()) {
					alert("验证码输入有误！");
					createCode();
				} else {
					alert("验证码输入成功！");
				}
			}
		</script>
	</head>

	<body onload="createCode()">
		
		
		<div class="container-fluid aaaa">
			<div class="col-xs-12 pay">
				<p>自助缴费</p>
				<hr />
			</div>
			<div class="col-xs-12 paym">
				<p>请选择缴费查询方式：</p>
			</div>
			<form action="insured" method="post" onsubmit="validateCode()">
				<select class="form-control control" name="carins">
					<option value="1">按车牌号</option>
					<option value="2">按投保人证件号码</option>
				</select>
				<input type="text" class="form-control control" placeholder="请输入号码"  id="identity" name="identity" >
				<div class="col-xs-12 dowl">
					<table border="0" cellspacing="4" cellpadding="4">

						
							<div  class="col-xs-4 c1">验证码:</div>
							<div class="a1">
							<input class="col-xs-4 a2" style="float:left;" type="text" id="inputCode" />
						</div>
						<tr>
							<td></td>
							<td>
								<div class="code" id="checkCode" onclick="createCode()"></div>
							</td>
							<td >
							<div class="kan">
								<a href="#" onclick="createCode()">看不清换一张</a></div>
							</td>
						</tr>
						<tr>
							<td></td>
							<td><input id="Button1"  onclick="validateCode();" type="submit" value="确定" class="submit" /></td>
							<td></td>
						</tr>
					</table>
				</div>
			</form>
				<div class="wen">
					<div class="wen1">
					</div >
					<div style="width: 5px;height: 5px;border: 1px solid #F5F5F5;border-radius: 15px; background-color: #F5F5F5; margin-left: 6em;margin-top: -0.3em;"></div>
					<div class="wen2">
						<h2>温馨提示</h2>
					</div>
					<div class="wen3" ></div>
					<div style="width: 5px;height: 5px;border: 1px solid #F5F5F5;border-radius: 15px; background-color: #F5F5F5; margin-left: 16em;margin-top: -0.3em;"></div>
					<p>1.请输入车牌号或者证件号进行查询</p>
					<p>2.切换选项可以更换查询方式</p>
				</div>


		</div>
	</body>

</html>